﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title></title>
  <!-- Bootstrap Styles-->
  <link rel="stylesheet" type="text/css" th:href="@{/static/assets/css/bootstrap.css}"/>
  <!-- FontAwesome Styles-->
  <link rel="stylesheet" type="text/css" th:href="@{/static/assets/css/font-awesome.css}"/>
  <!-- Custom Styles-->
  <link rel="stylesheet" type="text/css" th:href="@{/static/assets/css/custom-styles.css}"/>
  <!--time-->
  <link rel="stylesheet" type="text/css"
        th:href="@{/static/assets/bootstrap-datetime/bootstrap-datetimepicker.min.css}"/>
  <!-- Google Fonts-->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
  <!-- TABLE STYLES-->
  <link th:href="@{/static/assets/js/dataTables/dataTables.bootstrap.css}" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
  <nav class="navbar navbar-default top-navbar" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".sidebar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.do"><i class="fa fa-gear"></i>
        <strong>后台管理系统</strong></a>
    </div>

    <ul class="nav navbar-top-links navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-messages">
          <li>
            <a href="#">
              <div>
                <strong>John Doe</strong>
                <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
              </div>
              <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <strong>John Smith</strong>
                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
              </div>
              <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <strong>John Smith</strong>
                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
              </div>
              <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>Read All Messages</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>
        <!-- /.dropdown-messages -->
      </li>
      <!-- /.dropdown -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-tasks">
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Task 1</strong>
                  <span class="pull-right text-muted">60% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-success" role="progressbar"
                       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (success)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Task 2</strong>
                  <span class="pull-right text-muted">28% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28"
                       aria-valuemin="0" aria-valuemax="100" style="width: 28%">
                    <span class="sr-only">28% Complete</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Task 3</strong>
                  <span class="pull-right text-muted">60% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-warning" role="progressbar"
                       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (warning)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Task 4</strong>
                  <span class="pull-right text-muted">85% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-danger" role="progressbar"
                       aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                    <span class="sr-only">85% Complete (danger)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>See All Tasks</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>
        <!-- /.dropdown-tasks -->
      </li>
      <!-- /.dropdown -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-alerts">
          <li>
            <a href="#">
              <div>
                <i class="fa fa-comment fa-fw"></i> New Comment
                <span class="pull-right text-muted small">4 min</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                <span class="pull-right text-muted small">12 min</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <i class="fa fa-envelope fa-fw"></i> Message Sent
                <span class="pull-right text-muted small">4 min</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <i class="fa fa-tasks fa-fw"></i> New Task
                <span class="pull-right text-muted small">4 min</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <i class="fa fa-upload fa-fw"></i> Server Rebooted
                <span class="pull-right text-muted small">4 min</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>See All Alerts</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>
        <!-- /.dropdown-alerts -->
      </li>
      <!-- /.dropdown -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-user">
          <li><a href="/manage/user//to_register.do"><i class="fa fa-sign-out fa-fw"></i> 用户注册</a>
          </li>
          <li><a href="/manage/user//to_login.do"><i class="fa fa-sign-out fa-fw"></i> 用户登录</a>
          </li>
          <li><a href="#"><i class="fa fa-user fa-fw"></i>用户概况</a>
          </li>
          <li><a href="#"><i class="fa fa-gear fa-fw"></i> 用户设置</a>
          </li>
          <li class="divider"></li>
          <li>
            <!--<a href="/manage/user/do_logout.do"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>-->
            <button type="button" id="logout" class="btn btn-default">退出登录</button>
          </li>
        </ul>
        <!-- /.dropdown-user -->
      </li>
      <!-- /.dropdown -->
    </ul>
  </nav>
  <!--/. NAV TOP  -->
  <nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse">
      <ul class="nav" id="main-menu">
        <li>
          <a href="../../index.do"><i class="fa fa-dashboard"></i> 概览</a>
        </li>

        <li>
          <a href="../../table.do"><i class="fa fa-table"></i> 店铺管理</a>
        </li>

        <li>
          <a href="/manage/buyer/to_list.do"><i class="fa fa-table"></i> 微客管理</a>
        </li>

        <li>
          <a href="/manage/task/to_list.do"><i class="fa fa-table"></i> 任务管理</a>
        </li>

        <li>
          <a href="/manage/money/to_list.do"><i class="fa fa-table"></i> 商家充值明细</a>
        </li>

        <li>
          <a href="/manage/message/to_message.do"><i class="fa fa-table"></i> 公告管理</a>
        </li>

        <li>
          <a class="active-menu" href="/manage/user/to_list.do"><i class="fa fa-table"></i> 用户管理</a>
        </li>

        <!--<li>
          <a href="ui-elements.do"><i class="fa fa-desktop"></i> UI图标</a>
        </li>
        <li>
          <a href="chart.do"><i class="fa fa-bar-chart-o"></i> 图形</a>
        </li>
        <li>
          <a href="tab-panel.do"><i class="fa fa-qrcode"></i> Tabs & Panels切换框</a>
        </li>

        <li>
          <a href="form.do"><i class="fa fa-edit"></i> Forms表单 </a>
        </li>-->
      </ul>
    </div>

  </nav>
  <!-- /. NAV SIDE  -->
  <div id="page-wrapper">
    <div id="page-inner">
      <div class="row">
        <div class="col-md-12">
          <h1 class="page-header">
            用户管理</small>
          </h1>
        </div>
      </div>
      <!-- /. ROW  -->
      <div class="row">
        <div class="col-md-12">
          <!-- Advanced Tables -->
          <div class="panel panel-default">
            <div class="panel-heading">
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover" id="dataTables">

                  <!--<div class="form-group">
                    <label>商品名称</label>
                    <input class="form-control" id="staskName" placeholder="请输入商品名称" name="staskName">
                    <label>任务id</label>
                    <input class="form-control" id="sid" placeholder="请输入任务id"
                           name="sid">
                    <label>任务类型</label>
                    <input class="form-control" id="staskType"  name="staskType">
                    <select id="queryTypeOption" font-size="x-large"
                            data-live-search="true" th:align="center">
                      <option data-tokens="ketchup mustard" name="status" value="-100">全部</option>
                      <option data-tokens="ketchup mustard" name="status" value="1">淘宝天猫</option>
                      <option data-tokens="ketchup mustard" name="status" value="2">定向任务</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>店铺名称</label>
                    <input class="form-control" id="sshopName" placeholder="请输入店铺名称" name="sshopName">
                  </div>
                  <div>
                    <label>创建时间</label>
                    <a class='input-group date' id='datetimepicker1'
                       style="float: left; left: 320px;">
                      <input type='text' class="form-control" id='beginDate'
                             style="width: 150px; height: 30px;"/>
                      <span class="input-group-addon"
                            style="float: left; width: 50px; height: 30px;">
                        <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </a>
                    <label>到</label>
                    <a class='input-group date' id='datetimepicker2'
                       style="float: left; left: 320px;">
                      <input type='text' class="form-control" id='endDate'
                             style="width: 150px; height: 30px;"/>
                      <span class="input-group-addon"
                            style="float: left; width: 50px; height: 30px;">
                        <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </a>
                  </div>
                  <div>
                    <label>任务状态</label>
                    <select id="queryOption" font-size="x-large"
                            data-live-search="true" th:align="center">
                      <option data-tokens="ketchup mustard" name="status" value="-100">全部</option>
                      <option data-tokens="ketchup mustard" name="status" value="0">未付款</option>
                      <option data-tokens="ketchup mustard" name="status" value="1">待审核</option>
                      <option data-tokens="ketchup mustard" name="status" value="2">执行中</option>
                      <option data-tokens="ketchup mustard" name="status" value="3">完成</option>
                      <option data-tokens="ketchup mustard" name="status" value="4">过期</option>
                      <option data-tokens="mustard" name="status" value="100">未通过</option>
                    </select>
                  </div>
                  <button type="button" id="submit_Serch" class="btn btn-default"><span
                      class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>搜索
                  </button>-->
                </table>
              </div>
            </div>
          </div>
          <!--End Advanced Tables -->
        </div>
      </div>

    </div>
    <!--添加公告弹框 start-->
    <div class="modal fade" id="myMessageModal" tabindex="-1" role="dialog"
         aria-labelledby="myMessageModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myMessageModalLabel">添加用户</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label>用户名</label>
              <input type="text" name="username" class="form-control" id="username">
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input type="text" name="email" class="form-control" id="email">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" id="btn_content_submit" class="btn btn-primary"
                    data-dismiss="modal">
              <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!--关键字弹框 end-->


    <!--查看公告弹框 start-->
    <div class="modal fade" id="myDetailModal" tabindex="-1" role="dialog"
         aria-labelledby="myDetailModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myDetailModalLabel">查看公告</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label>标题</label>
              <input type="text" name="title" class="form-control" id="ltitle">
            </div>
            <div class="form-group">
              <label>内容</label>
              <input type="text" name="content" class="form-control" id="lcontent">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <!--查看公告弹框 end-->
    <footer><p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a
        href="http://www.bao.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a
        href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p></footer>
  </div>
  <!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script type="text/javascript" th:src="@{/static/assets/js/jquery-1.10.2.js}"></script>
<!-- Bootstrap Js -->
<script type="text/javascript" th:src="@{/static/assets/js/bootstrap.min.js}"></script>
<!-- Metis Menu Js -->
<script type="text/javascript" th:src="@{/static/assets/js/jquery.metisMenu.js}"></script>
<!-- DATA TABLE SCRIPTS -->
<script type="text/javascript"
        th:src="@{/static/assets/js/dataTables/jquery.dataTables.js}"></script>
<script type="text/javascript"
        th:src="@{/static/assets/js/dataTables/dataTables.bootstrap.js}"></script>
<script type="text/javascript"
        th:src="@{/static/assets/bootstrap-datetime/bootstrap-datetimepicker.min.js}"></script>
<script type="text/javascript"
        th:src="@{/static/assets/bootstrap-datetime/bootstrap-datetimepicker.zh-CN.js}"></script>
<script type="text/javascript"
        th:src="@{/static/assets/bootstrap-datetime/moment-with-locales.js}"></script>
<script type="text/javascript"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>
<script>
  $(document).ready(function () {
    $('#dataTables').bootstrapTable({
      method: 'post',
      contentType: "application/x-www-form-urlencoded",
      url: "/manage/user/list.do",
      dataField: "data",
      pageNumber: 1, //初始化加载第一页，默认第一页
      pagination: true,//是否分页
      queryParamsType: 'limit',
      sidePagination: 'client',
      pageSize: 10,//单页记录数
      pageList: [5, 10, 20, 30],//分页步进值
      showRefresh: false,//刷新按钮
      showColumns: false,
      clickToSelect: true,//是否启用点击选中行
      toolbarAlign: 'right',
      buttonsAlign: 'right',//按钮对齐方式
      columns: [
        {
          title: '全选',
          field: 'select',
          checkbox: true,
          width: 25,
          align: 'center',
          valign: 'middle'
        },
        {
          title: 'id',
          field: 'id',
        },
        {
          title: '用户名',
          field: 'username',
          align: 'center',
        },
        {
          title: '邮箱',
          field: 'email',
          align: 'center',
        },
        {
          title: '用户状态',
          field: 'accountStatus',
          sortable: true,
          formatter: operateFormatterStatus
        },
        {
          title: '用户等级',
          field: 'userLevel',
          sortable: true,
          formatter: operateFormatter
        },
        {
          title: '操作',
          align: 'center',
          events: operateEvents,
          formatter: checkTask
        }
      ],
      locale: 'zh-CN'//中文支持,
    });
  });

  function operateFormatter(value) {
    if (value == 1) {
      return '普通用户'
    } else if (value == 2) {
      return '管理员'
    }
  }

  function operateFormatterStatus(value) {
    if (value == 0) {
      return '初始化'
    } else if (value == 1) {
      return '正常'
    } else if (value == 100) {
      return '冻结'
    }
  }

  window.operateEvents = {
    'click #addMessage': function (e, value, row, index) {
      $("#myMessageModalLabel").text("添加用户");
      $('#myMessageModal').modal();
    },
    'click #changeMessage': function (e, value, row, index) {
      $.ajax({
        type: "POST",
        url: "/manage/user/restPassword.do",
        data: {
          Id: row.id
        },
        dataType: 'JSON',
        success: function (data) {
          alert(data.msg)
          location.reload();
        }
      });
    },
    'click #activation': function (e, value, row, index) {
      $.ajax({
        type: "POST",
        url: "/manage/user/activation.do",
        data: {
          Id: row.id,
          status: "1"
        },
        dataType: 'JSON',
        success: function (data) {
          alert(data.msg)
          location.reload();
        }
      });
    },
    'click #frozen': function (e, value, row, index) {
      $.ajax({
        type: "POST",
        url: "/manage/user/frozen.do",
        data: {
          Id: row.id,
          status: "100"
        },
        dataType: 'JSON',
        success: function (data) {
          alert(data.msg)
          location.reload();
        }
      });
    }
  };

  function checkTask(value, row, index) {
    return [
      '<button type="button" id="addMessage" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">添加用户</button>',
      '<button type="button" id="changeMessage" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">重置密码</button>',
      '<button type="button" id="activation" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">激活</button>',
      '<button type="button" id="frozen" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">冻结</button>'
    ].join('');
  }
</script>

<script type="text/javascript">
  $(function () {
    var $btn = $("#btn_content_submit");
    $btn.on(
        "click", function () {
          $.ajax({
            url: "/manage/user/register.do",
            data: {
              "username": $("#username").val(),
              "email": $("#email").val()
            },
            dataType: "json",
            type: "post",
            success: function (data) {
              if (data.success == true) {
                alert(data.msg)
                location.reload();
              } else {
                alert(data.msg)
              }
            }
          })
        })
  })
</script>

<script type="text/javascript">
  $(function () {
    var $btn = $("#btn_change_submit");
    $btn.on(
        "click", function () {
          $.ajax({
            url: "/manage/message/update_message.do",
            data: {
              "messageId": $("#cId").val(),
              "title": $("#ctitle").val(),
              "content": $("#ccontent").val()
            },
            dataType: "json",
            type: "post",
            success: function (data) {
              if (data.success == true) {
                alert(data.msg)
                location.reload();
              } else {
                alert(data.msg)
              }
            }
          })
        })
  })
</script>

<script type="text/javascript">
  $(function () {
    var $btn = $("#logout");
    $btn.on(
        "click", function () {
          $.ajax({
            url: "/manage/user/do_logout.do",
            data: {},
            dataType: "json",
            type: "post",
            success: function (data) {
              if (data.success == true) {
                window.location.href = "/index.do";
              } else {
                alert(data.msg)
              }
            }
          })
        })
  })
</script>

<script type="text/javascript">
  //设置日期时间控件
  $(function () {
    $('#datetimepicker1').datetimepicker({
      language: 'zh-CN',//显示中文
      format: 'yyyy-mm-dd',//显示格式
      minView: "month",//设置只显示到月份
      initialDate: new Date(),
      autoclose: true,//选中自动关闭
      todayBtn: true,//显示今日按钮
      locale: moment.locale('zh-cn')
    });
    //默认获取当前日期
    var today = new Date();
    var beginDate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-"
        + today.getDate();
    //对日期格式进行处理
    var date = new Date(beginDate);
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0"
        + day : day);
    document.getElementById("beginDate").value = mydate;
  })
</script>

<script type="text/javascript">
  //设置日期时间控件
  $(function () {
    $('#datetimepicker2').datetimepicker({
      language: 'zh-CN',//显示中文
      format: 'yyyy-mm-dd',//显示格式
      minView: "month",//设置只显示到月份
      initialDate: new Date(),
      autoclose: true,//选中自动关闭
      todayBtn: true,//显示今日按钮
      locale: moment.locale('zh-cn')
    });
    //默认获取当前日期
    var today = new Date();
    var endDate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
    //对日期格式进行处理
    var date = new Date(endDate);
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0"
        + day : day);
    document.getElementById("endDate").value = mydate;
  })
</script>
<!-- Custom Js -->
<script type="text/javascript" th:src="@{/static/assets/js/custom-scripts.js}"></script>
</body>
</html>
